﻿<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>商品详情</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../../assets/img/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,700,800,900%7CPoppins:300,400,500,600,700,800,900" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../assets/css/vendor/bootstrap.min.css">
    <!-- Font-awesome CSS -->
    <link rel="stylesheet" href="../../assets/css/vendor/font-awesome.min.css">
    <!-- Slick slider css -->
    <link rel="stylesheet" href="../../assets/css/plugins/slick.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="../../assets/css/plugins/animate.css">
    <!-- Nice Select css -->
    <link rel="stylesheet" href="../../assets/css/plugins/nice-select.css">
    <!-- jquery UI css -->
    <link rel="stylesheet" href="../../assets/css/plugins/jqueryui.min.css">
    <!-- main style css -->
    <link rel="stylesheet" href="../../assets/css/style.css">
    <script src="../../assets/js/plugins/utils.js"></script>
    <script src="../../assets/js/vendor/axios.min.js"></script>
    <script src="../../assets/js/vendor/vue.min.js"></script>


</head>

<body>
    <!-- Start Header Area -->
    <header class="header-area" id="header"></header>
    <!-- end Header Area -->


    <main>
        <!-- breadcrumb area start -->
        <div class="breadcrumb-area breadcrumb-img bg-img" data-bg="../../assets/img/banner/shop.jpg">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumb-wrap">
                            <nav aria-label="breadcrumb">
                                <h3 class="breadcrumb-title">商品列表</h3>
                                <ul class="breadcrumb justify-content-center">
                                    <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="shop.html">商品列表</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">商品详情</li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- breadcrumb area end -->

        <!-- page main wrapper start -->
        <div class="shop-main-wrapper section-padding pb-0" id="detail">
            <div class="container">
                <div class="row">
                    <!-- product details wrapper start -->
                    <div class="col-lg-12 order-1 order-lg-2">
                        <!-- product details inner end -->
                        <div class="product-details-inner">
                            <div class="row">
                                <div class="col-lg-5">
                                    <div class="product-large-slider">
                                        <div class="pro-large-img img-zoom" v-for="img in product.pics">
                                            <img :src="img.path" alt="product-details" />
                                        </div>
                                    </div>
                                    <div class="pro-nav slick-row-10 slick-arrow-style" >
                                        <div class="pro-nav-thumb" v-for="img in product.pics">
                                            <img :src="img.path" alt="product-details" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-7">
                                    <div class="product-details-des">
                                        <h3 class="product-name">{{product.name}}</h3>

                                        <div class="ratings d-flex" v-if="product.averageStar==1">
                                            <span style="color: red"><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <div class="pro-review">
                                                <span>{{product.reviewCount}} 条评论</span>
                                            </div>
                                        </div>
                                        <div class="ratings d-flex" v-else-if="product.averageStar==2">
                                            <span style="color:red"><i class="fa fa-star"></i></span>
                                            <span style="color:red"><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <div class="pro-review">
                                                <span>{{product.reviewCount}} 条评论</span>
                                            </div>
                                        </div>
                                        <div class="ratings d-flex" v-else-if="product.averageStar==3">
                                            <span style="color:red"><i class="fa fa-star"></i></span>
                                            <span style="color:red"><i class="fa fa-star"></i></span>
                                            <span style="color:red"><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <div class="pro-review">
                                                <span>{{product.reviewCount}} 条评论</span>
                                            </div>
                                        </div>
                                        <div class="ratings d-flex" v-else-if="product.averageStar==4">
                                            <span style="color:red"><i class="fa fa-star"></i></span>
                                            <span style="color:red"><i class="fa fa-star"></i></span>
                                            <span style="color:red"><i class="fa fa-star"></i></span>
                                            <span style="color:red"><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <div class="pro-review">
                                                <span>{{product.reviewCount}} 条评论</span>
                                            </div>
                                        </div>
                                        <div class="ratings d-flex" v-else="product.averageStar==5">
                                            <span style="color:red"><i class="fa fa-star"></i></span>
                                            <span style="color:red"><i class="fa fa-star"></i></span>
                                            <span style="color:red"><i class="fa fa-star"></i></span>
                                            <span style="color:red"><i class="fa fa-star"></i></span>
                                            <span style="color:red"><i class="fa fa-star"></i></span>
                                            <div class="pro-review">
                                                <span>{{product.reviewCount}} 条评论</span>
                                            </div>
                                        </div>
                                        <div class="price-box">
                                            <span class="price-old"  v-if="product.oldPrice!=product.newPrice" ><del>¥{{product.oldPrice}}</del></span>
                                            <span class="price-regular">¥{{product.newPrice}}</span>
                                        </div>
                                        <div class="availability">
                                            <i class="fa fa-check-circle"></i>
                                            <span>库存：{{product.stock}}</span>
                                        </div>
                                        <p class="pro-desc">商品简介：{{product.briefIntro}}</p>
                                        <div class="quantity-cart-box d-flex align-items-center">
                                            <h6 class="option-title">数量：</h6>
                                            <div class="quantity">
                                                <div class="pro-qty"><input type="text" id="pnum" value="1"></div>
                                            </div>
                                            <div class="action_link">
                                                <a class="btn btn-cart2" href="javascript:void(0)" @click="addCart(product.id,1)">添加购物车</a>
                                            </div>
                                        </div>
                                        <div class="useful-links">
                                            <a href="#" data-toggle="tooltip" title="Compare"><i
                                                class="fa fa-refresh"></i>compare</a>
                                            <a href="#" data-toggle="tooltip" title="Wishlist"><i
                                                class="fa fa-heart-o"></i>wishlist</a>
                                        </div>
                                        <div class="like-icon">
                                            <a class="facebook" href="#"><i class="fa fa-facebook"></i>like</a>
                                            <a class="twitter" href="#"><i class="fa fa-twitter"></i>tweet</a>
                                            <a class="pinterest" href="#"><i class="fa fa-pinterest"></i>save</a>
                                            <a class="google" href="#"><i class="fa fa-google-plus"></i>share</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- product details inner end -->

                        <!-- product details reviews start -->
                        <div class="product-details-reviews section-padding pb-0">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="product-review-info">
                                        <ul class="nav review-tab">
                                            <li>
                                                <a class="active" data-toggle="tab" href="#tab_one">商品详情</a>
                                            </li>
                                            <li>
                                                <a data-toggle="tab" href="#tab_two">商品信息</a>
                                            </li>
                                            <li>
                                                <a data-toggle="tab" href="#tab_three">用户评价 ({{product.reviewCount}})</a>
                                            </li>
                                        </ul>
                                        <div class="tab-content reviews-tab">
                                            <div class="tab-pane fade show active" id="tab_one">
                                                <div class="tab-one">
                                                    <p>{{product.detail}}</p>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab_two">
                                                <table class="table table-bordered">
                                                    <tbody>
                                                        <tr>
                                                            <td>color</td>
                                                            <td>black, blue, red</td>
                                                        </tr>
                                                        <tr>
                                                            <td>size</td>
                                                            <td>L, M, S</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="tab-pane fade" id="tab_three">
                                                <form action="#" class="review-form">
                                                    <h5>{{product.reviewCount}}条评论 <span>{{product.name}}</span></h5>
                                                    <div class="total-reviews" v-if="product.reviewCount!=0" v-for="review in reviewList">
                                                        <div class="rev-avatar">
                                                            <img :src="review.user.img" alt="加载失败">
                                                        </div>
                                                        <div class="review-box">
                                                            <div class="ratings" v-if="review.star==1">
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                                <span><i class="fa fa-star"></i></span>
                                                                <span><i class="fa fa-star"></i></span>
                                                                <span><i class="fa fa-star"></i></span>
                                                                <span><i class="fa fa-star"></i></span>
                                                            </div>
                                                            <div class="ratings" v-else-if="review.star==2">
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                                <span><i class="fa fa-star"></i></span>
                                                                <span><i class="fa fa-star"></i></span>
                                                                <span ><i class="fa fa-star"></i></span>
                                                            </div>
                                                            <div class="ratings" v-else-if="review.star==3">
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                                <span><i class="fa fa-star"></i></span>
                                                                <span ><i class="fa fa-star"></i></span>
                                                            </div>
                                                            <div class="ratings" v-else-if="review.star==4">
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                                <span class="good"><i class="fa fa-star"></i></span>
                                                            </div>
                                                            <div class="ratings" v-else="review.star==5">
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                                <span style="color: red"><i class="fa fa-star"></i></span>
                                                            </div>

                                                            <div class="post-author">
                                                                <p><span>{{review.user.nickname}}-</span>{{review.time}}</p>
                                                            </div>
                                                            <p>{{review.content}}</p>
                                                        </div>
                                                    </div>

                                                    <div class="paginatoin-area text-center" id="page">
                                                        <ul class="pagination-box">
                                                            <li v-if="reviews.hasPreviousPage!=false"><a class="previous" href="javascript:void(0)"
                                                                                                      @click="getDetail(reviews.pageNum-1)"><i
                                                                    class="fa fa-angle-left"></i></a></li>
                                                            <template v-for="index in reviews.navigatepageNums">
                                                                <li class="active" v-if="index==reviews.pageNum"><a
                                                                        href="javascript:void(0)">{{index}}</a></li>
                                                                <li v-else><a href="javascript:void(0)" @click="getDetail(index)">{{index}}</a>
                                                                </li>
                                                            </template>
                                                            <li v-if="reviews.hasNextPage!=false"><a class="next" href="javascript:void(0)"
                                                                                                   @click="getDetail(reviews.pageNum+1)"><i
                                                                    class="fa fa-angle-right"></i></a></li>
                                                        </ul>
                                                    </div>

                                                    <div class="form-group row">
                                                        <div class="col">
                                                            <label class="col-form-label"><span class="text-danger">*</span>
                                                                评论</label>
                                                            <textarea class="form-control" required id="content"></textarea>
                                                            <div class="help-block pt-10"><span
                                                                    class="text-danger">注意:</span>
                                                                请勿恶意评价，您的评价对我们非常重要！
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row" >
                                                        <div class="col">
                                                            <label class="col-form-label"><span class="text-danger">*</span>
                                                                评级</label>
                                                            &nbsp;&nbsp;&nbsp; 差评

                                                            <input type="radio" value="1" name="rating" id="star_id">
                                                            &nbsp;
                                                            <input type="radio" value="2" name="rating" id="star_id1">
                                                            &nbsp;
                                                            <input type="radio" value="3" name="rating" id="star_id2">
                                                            &nbsp;
                                                            <input type="radio" value="4" name="rating" id="star_id3">
                                                            &nbsp;
                                                            <input type="radio" value="5" name="rating" id="star_id4" checked="checked">
                                                            &nbsp;好评
                                                        </div>
                                                    </div>
                                                    <div class="buttons" id="review">
                                                        <button class="btn btn-sqr" type="button" onclick="subReview()">提交</button>
                                                    </div>

                                                </form> <!-- end of review-form -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- product details reviews end -->
                    </div>
                    <!-- product details wrapper end -->
                </div>
            </div>
        </div>
        <!-- page main wrapper end -->

        <!-- Related product area start -->
        <!-- Related product area end -->
    </main>

    <!-- Scroll to top start -->
    <div class="scroll-top not-visible">
        <i class="fa fa-angle-up"></i>
    </div>
    <!-- Scroll to Top End -->


    <!-- footer area start -->
    <footer class="black-bg" id="footer"></footer>
    <!-- footer area end -->



    <!-- Quick view modal start -->
    <!-- Quick view modal end -->

    <!-- JS
============================================ -->
    <!-- jQuery JS -->
    <script src="../../assets/js/vendor/jquery-3.3.1.min.js"></script>

    <script src="../../assets/js/product/product_detail.js"></script>
    <!-- Modernizer JS -->
    <script src="../../assets/js/vendor/modernizr-3.6.0.min.js"></script>
    <!-- Popper JS -->
    <script src="../../assets/js/vendor/popper.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="../../assets/js/vendor/bootstrap.min.js"></script>
    <!-- slick Slider JS -->
    <script src="../../assets/js/plugins/slick.min.js"></script>
    <!-- Countdown JS -->
    <script src="../../assets/js/plugins/countdown.min.js"></script>
    <!-- Nice Select JS -->
    <script src="../../assets/js/plugins/nice-select.min.js"></script>
    <!-- jquery UI JS -->
    <script src="../../assets/js/plugins/jqueryui.min.js"></script>
    <!-- Image zoom JS -->
    <script src="../../assets/js/plugins/image-zoom.min.js"></script>
    <!-- image loaded js -->
    <script src="../../assets/js/plugins/imagesloaded.pkgd.min.js"></script>
    <!-- masonry  -->
    <script src="../../assets/js/plugins/masonry.pkgd.min.js"></script>
    <!-- mailchimp active js -->
    <script src="../../assets/js/plugins/ajaxchimp.js"></script>
    <!-- contact form dynamic js -->
    <script src="../../assets/js/plugins/ajax-mail.js"></script>
<!--    &lt;!&ndash; google map api &ndash;&gt;-->
<!--    <script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCfmCVTjRI007pC1Yk2o2d_EhgkjTsFVN8"></script>-->
<!--    &lt;!&ndash; google map active js &ndash;&gt;-->
<!--    <script src="../../assets/js/plugins/google-map.js"></script>-->
    <!-- Main JS -->
    <script src="../../assets/js/main.js"></script>

    <script>
        $("#header").load("../common/header.html");
        $("#footer").load("../common/footer.html");
    </script>
</body>

</html>